<template>
	<view class="i-historySearch">
		<view class="his_body">
			<view class="history_title">
				<text>搜索历史</text>
				<image @click.stop="clear" src="../../static/images/delete_icon.png"></image>
			</view>
			<view class="history_ls">
				<text @click.stop="handleClick(item)" v-for="(item,index) in historyUser"
					:key="index">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import _ from 'lodash'
	import {
		ref,
		defineProps,
		defineEmits,
		watch,
		computed
	} from 'vue';
	import { getStorage, setStorage } from '../../utils/common';
	const keyWords = ref('')
	const props = defineProps({
		type: {
			type: String,
			defalut: 'historyUser'
		},
	})

	const historyUser = computed(() => {
		return getStorage(props.type) || []
	})
	const emit = defineEmits(['change'])

	const handleClick = (item : string) => {
		emit('change', item)
	}

	const clear = () => {
		uni.showModal({
			content: '是否清空搜索历史？',
			cancelText: '取消',
			confirmText: '确认',
			success: res => {
				if (res.confirm) {
					setStorage(props.type, null)
				}
			},
			fail: () => { },
			complete: () => { }
		});
	}
</script>

<style lang="scss" scoped>
	.i-historySearch {
		width: 100vw;
		background: rgba(0, 0, 0, 0.2);
		height: calc(100vh - 88px);
		position: absolute;
		z-index: 89;

		.his_body {
			width: 100%;
			background: $background-color;
			height: 380rpx;

			.history_title {
				padding: 0 32rpx;
				@include flexRS;
				@include titlefont(26rpx);
				color: #A0A0AD;
				height: 88rpx;
				border-bottom: 1rpx solid #E6E6F0;

				image {
					width: 48rpx;
					height: 48rpx;
				}

			}

			.history_ls {
				padding: 0 18rpx;
				height: 240rpx;
				margin-top: 30rpx;
				@include flexR;
				align-items: flex-start;
				flex-wrap: wrap;
				overflow-y: auto;

				text {
					@include dfont(26rpx);
					@include overflow;
					color: #606A8A;
					margin-bottom: 32rpx;
					padding:12rpx 24rpx;
					background: #E6E6EB;
					border-radius: 4rpx;
					margin: 10rpx;
				}

			}
		}

	}
</style>